<template>
  <div class="bartop"> 
        <span class="iconfont icon-jiantou2" @click="goback()"></span>    
        <span class="iconfont icon-fenxiang"  @click="showShare = true"></span>
        <span class="collect save edit" @click="fun()" ref="changecolor"></span>
  
    
<!-- <van-cell class="iconfont icon-shoucang" @click="showShare = true" /> -->
<van-share-sheet
  v-model="showShare"
  title="分享到"
  :options="options"
  @select="onSelect"
/>

  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    goback(){
        this.$router.go(-1);
    },
      fun(){
if(localStorage.getItem("token")=="" || localStorage.getItem("token")==null){
            let goLogin = window.confirm("亲，您还没有登录哦，请先登录");
            if (goLogin) {
                this.$router.push("DAccountLogin");
            }                      
        }else{
                this.$toast({
                message: '恭喜，收藏成功',
                position: 'bottom',
            });
            this.$refs.changecolor.style.backgroundImage="url('https://static.shengri.cn/uploads/image/shoucang/heart_f.png')"
        }     
        },
       
  },
 
  
}
</script>

<style scoped>
@import '../../../public/flower/iconfont.css';
.bartop{
   height: 0.8rem;
  line-height: 0.8rem;
  width: 100%;
  position: absolute;
  top: 0;
  color: black; 
}
.icon-jiantou2,.collect,.icon-fenxiang{
  color:#e05a4d;
  font-size: 0.2rem;
}
.icon-jiantou2{
float: left;
}
 .save{
  background-image: url(https://static.shengri.cn/uploads/image/shoucang/heart_f.png);
}
.collect{
   background-image: url(https://static.shengri.cn/uploads/image/shoucang/heart_e.png);
  margin-right: 0.2rem;
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  background-size: 0.2rem 0.2rem;
  margin-top: 0.3rem;
}


.icon-fenxiang{
  margin-right: 0.1rem;
}
.collect,.icon-fenxiang{
  float:right;
}

</style>